<template>
    <div class="page detaillist">
        <von-header class="dl-header">
            <button class="button button-icon ion-ios-arrow-back" slot="left" @click="$router.back('/home')"></button>
            <span slot="title" class="dl-title">{{info.name}}</span>
            <button class="button button-icon ion-android-favorite-outline" slot="right" @click="favorate()"></button>
        </von-header>
        <div class="page-content" @scroll="detailScroll()">
            <swiper :detail_images="this.detail_images" class="detail_swiper" v-if="tabIndex==0"></swiper>
            <tabs :tab-items="tabs" :tab-index="tabIndex" :on-tab-click="onTabClick"></tabs>
            <div class="clear"></div>
            <div v-if="tabIndex==0">
                <div class="dl-info">
                    <h1>{{info.product_id}}-{{info.name}}</h1>
                    <ul class="dl-info-tag" v-if="info.tags">
                        <li v-for="l in info.tags">{{l.name}}</li>
                        <li>奇趣自然</li><li>奇趣自然</li><li>奇趣自然</li><li>奇趣自然</li>
                    </ul>
                    <div class="dl-info-price">
                        <div class="dl-price-sell">已售：{{info.ordered}}</div>
                        <div class="dl-price">
                            <span>￥</span>
                            <span class="dl-info-price-value">{{info.default_price}}</span>
                            <span>起</span>
                        </div>
                    </div>
                    <div class="dl-info-five">
                        <ul>
                            <li><i class="ion-android-sunny icons"></i><span>时间：{{info.duration.time}}天 </span></li>
                            <li><i class="ion-images icons"></i><span>景点：{{info.visited_city_num}}景 </span></li>
                            <li><i class="ion-ios-people-outline icons"></i><span>成行：{{message.other.departure_time.min_num_guest}}人 </span></li>
                            <li><i class="ion-ios-world-outline icons"></i><span>语言：<span v-for="l in info.language">{{l}}</span> </span></li>
                            <li><span>{{info.start_city[0]}}</span><hr><span  v-for="l in info.end_city">{{l}}&nbsp;</span></li>
                        </ul>
                    </div>
                </div>
                <div class="dl-info-recommend">
                    <h4>产品经理推荐</h4>
                    <div class="dl-recommend-manger">
                        <div class="dl-manger-image">
                            <img src="../assets/image/lazy.png" alt="">
                        </div>
                        <div class="dl-manger-text">lucy</div>
                    </div>
                    <div class="dl-recommend-description" v-html="info.small_description"></div>
                </div>
                <div class="dl-info-comment" v-if="data_exit">
                    <div class="dl-comment-title">
                        <h4>旅客满意度：<span>{{comments.satisfaction | persent}}</span></h4>
                        <h4 @click="goComment()" :comments="comments">共<span>{{comments.total}}</span>条评论 <i class="ion-chevron-right"></i> </h4>
                    </div>
                    <div class="dl-comment-first">
                        <span>{{items0.name}}</span>
                        <span>{{items0.time | time}}</span>
                        <div class="clear"></div>
                        <p>{{items0.content}}</p>
                    </div>

                </div>
                <div class="dl-info-special" v-if="message.notice.travel_tips">
                    <h4>行程特色</h4>
                    <div class="dl-special-image" v-html="message.notice.travel_tips"></div>
                </div>
            </div>
            <div v-if="tabIndex==1">
                <accordion :itinerary="itinerary"></accordion>
            </div>
            <div v-if="tabIndex==2">
                <accordion-know :notice="notice"></accordion-know>
            </div>
        </div>
        <footer class="il-footer">
            <div class="il-footer-left" @click="phoneService()">
                <span class="ion-ios-telephone-outline">联系客服</span>
            </div>
            <div class="il-footer-right" @click="orderRight()">立即订购</div>
        </footer>
        <loading v-if="show"></loading>
    </div>
</template>

<script>
    import Swiper from '../components/swiper.vue'
    import Comment from '../components/comment.vue'
    import  Accordion from '../components/accordion.vue'
    import  AccordionKnow from '../components/accordionknow.vue'
    import Loading from '../components/loading.vue'
    export default {
        components:{Swiper,Comment,Accordion,AccordionKnow,Loading},
        data(){
            return{
                id:this.$route.params.id,
                tabs: [
                    "商品",
                    "详情",
                    "须知"
                ],
                tabIndex:0,
                message:{"other":{"departure_time":{}}},
                comments:{"items":[],"satisfaction":"","total":""},
                items0:{"name":"","time":"","content":""},
                info:{"duration":{"time":''}},
                detail_images:[],
                image_width:0,
                image_height:0,
                data_exit:false,
                modal: undefined,
                itinerary:[],
                notice:{},
                show:false
            }
        },
        methods:{
            favorate(){

                if(!localStorage.getItem('name')){
                    this.$router.push('/login')
                }
            },
            phoneService(){
                $actionSheet.show({
                    title: '7x24服务热线',
                    buttons: {
                        '(中国)400-635-6555': () => {
                            console.log('action 1 called.')
                        },
                        '(美国)866-638-6888': () => {
                            console.log('action 2 called.')
                        }
                    }
                })
            },
            orderRight(){

            },
            onTabClick(index) {
                console.log(index)
                this.tabIndex = index
                if(index==0){
                    $('.detaillist .tabs').css({'position':'absolute','top':'220px'})
                    $('.detaillist .bar.bar-header').css('background','transparent')
                    $('.detaillist .bar-light .button').css('color','#fff')
                    $('.detaillist .dl-title').css('color','transparent')
                }else{
                    console.log('1')
                    $('.detaillist .tabs').css({'position':'fixed','top':'44px'})
                    $('.detaillist .bar.bar-header').css({'background':'#fff','opacity':'1'})
                    $('.detaillist .bar-light .button,.dl-title').css('color','#363636')
                }
            },
            detailScroll(){
                this.image_height=$('.detail_img>img').eq(0).height()
//                console.log(this.image_height)
                $('.detail_img').css('height',this.image_height+'px')
                var scrollHeight=this.$el.querySelector('.page-content').scrollTop
//                console.log(scrollHeight)
                if(this.tabIndex==0){
                if(scrollHeight>this.image_height-44){
                    $('.detaillist .tabs').css({'position':'fixed','top':'44px'})
                    $('.detaillist .bar.bar-header').css({'background':'#fff','opacity':'1'})
                    $('.detaillist .bar-light .button,.dl-title').css('color','#363636')
                }else if(scrollHeight>0){
                    $('.detaillist .tabs').css({'position':'absolute','top':'220px'})
                    $('.detaillist .bar.bar-header').css({'background':'#fff','opacity':'0.9'})
                }else if(scrollHeight==0){
                    $('.detaillist .bar.bar-header').css('background','transparent')
                    $('.detaillist .bar-light .button').css('color','#fff')
                    $('.detaillist .dl-title').css('color','transparent')
                }
                }
            },
            goComment(){
                this.modal.show()
            }
        },
        created(){
            this.show=true
            this.axios.get('https://app.toursforfun.com/product/'+this.id+'/detail')
                .then(data=>{
                    this.show=false
                    this.message=data.data.data
                    console.log(this.message)
                    this.detail_images=this.message.info.images
                    this.info=this.message.info
                    this.itinerary=this.message.detail.itinerary
                    this.notice=this.message.notice
                    console.log(this.notice)

                    this.axios.get('https://app.toursforfun.com/product/multiday-tour/'+this.id+'/comment?limit=1000')
                        .then(data=>{
                            this.comments=data.data.data
                            if(this.comments.satisfaction!=null){
                                this.data_exit=true
                                this.items0=this.comments.items[0]
                            }
                            console.log(this.items0)
                        })
                        .catch(err=>{
                            console.log(err)
                        })
                })
        },
        mounted(){
            this.image_height=$('.detail_img>div').eq(0).children('img').height()
            $('.detail_img').css('height',this.image_height+'px')
//            console.log(this.image_height)
            $modal.fromComponent(Comment, {
                title: '评论',
                theme: 'default',
                onHide: () => {
                    console.log('modal hide')
                }
            }).then((modal) => {
                this.modal = modal
            })
        },
        destroyed() {
            if (this.modal)
                $modal.destroy(this.modal)
        },
//        filters:{
//            persent:function(value){
//                return parseFloat( value).toFixed(1)+'%'
//            },
//            time:function(value){
//                return value.substr(0,10)
//            }
//        }
    }
</script>
<style>
    .detaillist .bar{
        background-size: 100% 0px;
        border:0;
    }
    .detaillist .bar.bar-header{
        box-shadow: none;
        background: transparent;
    }
    .dl-title{
        margin: 0 100px 10px 60px;
        height: 34px;
        line-height: 34px;
        font-size: 20px;
        font-weight: bold;
        max-width: 165px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #3f3f3f;
    }
    .il-footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 55px;
        line-height: 55px;
        background-color: #FFF;
        display: flex;
        font-size: 20px;
        font-weight: 600;
        color:#3f3f3f;
    }
    .il-footer-left{
        flex:1;
        text-align: center;
        height: 100%;
        line-height: 54px;
        text-align: center;
        border-top: 1px solid #E1E0E6;
        position: relative;
    }
    .il-footer-left span.ion-ios-telephone-outline::before{
        display: inline-block;
        width:50px;
        font-size:45px;
        position: relative;
        top:10px;
    }
    .il-footer-right{
        flex:1;
        text-align: center;
        background: #FB5F10;
        border-color: #FB5F10;
        color: #fff;
        font-weight: 600;
        margin: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    .detaillist .tabs{
        height:44px;
        position: absolute;
        top:220px;
    }
    .detaillist .tabs-top.tabs-striped {
        padding-bottom: 0;
        height: 44px;
    }
    .detaillist .tabs-striped.tabs-color-positive .tab-item{
        font-size: 16px;
        color: #363636;
    }
    .detaillist .tabs-striped.tabs-color-positive .tab-item.tab-item-active, .tabs-striped.tabs-color-positive .tab-item.active, .tabs-striped.tabs-color-positive .tab-item.activated{
        color: #363636;
        font-size: 18px;
        height:44px;
        overflow: hidden;
    }
    .detaillist .tabs-top.tabs-striped .tab-item.tab-item-active, .tabs-top.tabs-striped .tab-item.active, .tabs-top.tabs-striped .tab-item.activated {
        margin-top: 1px;
        color:#363636;;
        border-style: solid;
    }
    .detaillist .page-content{
        margin-bottom: 55px;
    }
    .bar-light .button{
        color: #fff;
    }
    .dl-title{
        color: transparent;
        margin: 0 100px 10px 60px;
        height: 44px;
        line-height: 44px;
        font-size: 20px;
        font-weight: bold;
        max-width: 165px;
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .dl-info{
        padding: 40px 24px 40px;
        color: #363636;
    }
    .dl-info h1{
        font-size:20px;
        font-weight: bold;
        line-height: 28px;
        margin: 0;
        color: #363636;
    }
    .dl-info-tag{
        margin-top: 24px;
        overflow: hidden;
    }
    .dl-info-tag li{
        border-radius: 4px;
        border: 1px solid #fb5f10;
        color: #fb5f10;
        background-color: #FFF;
        padding: 0 10px;
        height: 20px;
        white-space: nowrap;
        font-size: 14px;
        float: left;
        margin-right: 10px;
        margin-bottom: 12px;
        line-height: 18px;
    }
    .dl-info-price{
        font-size: 12px;
        margin-top: 28px;
        display: flex;
    }
    .dl-price-sell{
        height: 100%;
    }
    .dl-price{
        flex: 1;
        text-align: right;
        height: 100%;
        font-size: 12px;
        line-height: 8px;
        text-align: right;
        color: #fb5f10;
    }
    .dl-price span:nth-of-type(3){
        color: #363633;
    }
    .dl-info-price-value{
        font-size: 24px;
        font-weight: bold;
    }
    .dl-info-five{
        margin-top: 48px;
        font-size:14px;
    }
    .dl-info-five li{
        line-height: 32px;
        height: 32px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-bottom: 24px;
    }
    .icons{
        margin-right:20px;
        font-size:30px;
    }
    .dl-info-five li>span{
        position: relative;
        top:-6px;
    }
    hr{
        width:50%;
        height:1px;
        display: inline-block;
        position: relative;
        top:-8px;
        margin:0 30px;
    }
    .dl-info-recommend{
        padding: 56px 24px;
        border-bottom: 1px solid #E1E0E6;
    }
    .dl-info-recommend h4{
        position: relative;
        width: 100%;
        text-align: left;
        font-size: 17px;
        margin: 0;
        color: #363636;
        font-weight: bold;
    }
    .dl-recommend-manger{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 32px 0 32px;
    }
    .dl-manger-image{
        width: 68px;
        height: 68px;
        border-radius: 50%;
        border: 1px solid #E6E6E6;
        margin-right: 20px;
    }
    .dl-manger-image img{
        width:68px;
        height:68px;
        border-radius: 50%;
    }
    .dl-manger-text{
        font-size: 23px;
        color: #363636;
        text-align: center;
    }
    .dl-info-comment{
        padding: 56px 24px;
    }
    .dl-comment-title{
        display: flex;
        justify-content: space-between;
        margin-bottom: 32px;
    }
    .dl-comment-title h4:nth-of-type(1){
        text-align: left;
    }
    .dl-comment-title h4:nth-of-type(2){
        text-align: right;
    }
    .dl-comment-title h4 span,.dl-comment-title h4 i{
        color: #0090f2;
    }
    .dl-comment-first{
        color: #363636;
    }
    .dl-comment-first span:nth-of-type(1){
        display: inline-block;
        float: left;
    }
    .dl-comment-first span:nth-of-type(2){
        display: inline-block;
        float: right;
    }
    .dl-comment-first p{
        margin-top: 15px;
    }
    .dl-info-special{
        padding: 56px 24px;
        border-bottom: 1px solid #E1E0E6;
    }
    .dl-special-image img{
        width: 105%;
        vertical-align: middle;
        padding-right: 0;
    }
    .dl-info-special h4{
        margin-bottom: 20px;
    }
</style>